<template>
  <div>
    <div class="box-border p-12px">
      <div>
        <SubTitle title="标签命中情况" />
        <AsyncTable v-bind="tableInfo" ref="tableRef" :fetchData="fetchData" />
      </div>
    </div>
    <el-dialog destroy-on-close v-model="dialogTableVisible" title="查看样例数据" width="600">
      <AsyncTable v-bind="dialogTableInfo" ref="dialogTableRef" :fetchData="fetchDialogData" />
    </el-dialog>
    <div>
      <el-button @click="closeOutDrawer">关闭</el-button>
    </div>
  </div>
</template>
<script lang="tsx" setup>
import SubTitle from '@/components/SubTitle/index.vue'
import { fileParseResultLabelPage, fileParseResultSamplePage } from '@/api/assetList'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  },
  closeOutDrawer: Function
})

const currentLabel = ref()

const tableInfo = reactive({
  columns: [
    {
      label: '分类标签',
      prop: 'labelName'
    },
    {
      label: '分级',
      prop: 'labelLevelName'
    },
    {
      label: '命中数量',
      prop: 'hitCount'
    },
    {
      label: '操作',
      width: '250px',
      render: ({ row }) => {
        return (
          <>
            <el-button
              link
              type="primary"
              onClick={() => {
                checkSample(row)
              }}
            >
              查看抽样数据
            </el-button>
          </>
        )
      }
    }
  ],
  data: []
})

const fetchData = async ({ page, pageSize }) => {
  const { data, count } = await fileParseResultLabelPage({
    page,
    pageSize,
    resultId: props.params.resultId
  })
  return { data, count }
}

const dialogTableVisible = ref(false)
const dialogTableInfo = reactive({
  columns: [
    {
      label: '标签',
      // prop: 'labelName'
      render: ({ row }) => {
        return (
          <>
            <span>{currentLabel.value}</span>
          </>
        )
      }
    },
    {
      label: '样例数据',
      prop: 'sample'
    }
  ],
  data: []
})
const dialogId = ref()

const fetchDialogData = async ({ page, pageSize }) => {
  const { data, count } = await fileParseResultSamplePage({
    page,
    pageSize,
    labelId: dialogId.value
  })
  return { data, count }
}

const checkSample = (row) => {
  currentLabel.value = row.labelName
  dialogTableVisible.value = true
  dialogId.value = row.id
}

console.log('props.params', props.params)
</script>

<style scoped lang="scss">
:deep(.el-table .el-form-item--default) {
  margin-bottom: 0 !important;
}
.sample-item {
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
}
</style>
